<!DOCTYPE html>
<html
  layout:decorator="components/layout"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
>
<head>
  <title>黑白名单管理</title>
</head>
<body>
<div
  layout:fragment="content"
  id="app" v-cloak
>
  <div class="container">

    <div class="myHeader">
      <div class="myHeader-title">
        黑白名单管理
      </div>
    </div>

    <el-row :gutter="5">
      <el-form label-width="80px">

        <el-col :span="2">
          <el-form-item label-width="0px">
            <el-button
              type="primary"
              size="mini"
              @click="addInfo"
              v-realm="'system-configuration:sys-black-white-list:edit'"
            >新增
            </el-button>
          </el-form-item>
        </el-col>

        <el-col :span="2">
          <el-form-item label-width="0px">
            <el-button type="primary" size="mini" icon="el-icon-search" @click="toggle">高级搜索</el-button>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="内容:">
            <el-input
              clearable
              size="mini"
              show-word-limit
              maxlength="50"
              v-model="form.content"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="1">
          <el-form-item label-width="0px">
            <el-button size="mini" type="primary" icon="el-icon-search" @click="searchPage"></el-button>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="活跃状态">
            <el-select v-model="form.status" @change="searchPage" placeholder="请选择" size="mini" clearable>
              <el-option v-for="[key,val] in fieldFormatter.sysWhitelist.statusMap" :label="val" :key="key"
                         :value="key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="所有类型">
            <el-select v-model="form.category" @change="searchPage" placeholder="请选择" size="mini" clearable>
              <el-option v-for="[key,val] in fieldFormatter.sysWhitelist.categoryMap" :label="val" :key="key"
                         :value="key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="所有来源">
            <el-select v-model="form.source" @change="searchPage" placeholder="请选择" size="mini" clearable>
              <el-option v-for="[key,val] in fieldFormatter.sysWhitelist.sourceMap" :label="val" :key="key"
                         :value="key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

      </el-form>
    </el-row>


    <el-row>
      <el-form label-width="100px" class="container-search" v-show="formShow">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="备注:">
              <el-input
                v-model="form.comments"
                clearable
                show-word-limit
                maxlength="128"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="创建时间:">
              <el-date-picker
                v-model="form.timeArray"
                @change="changeCreateTime"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>

        <div style="text-align:center; margin-bottom:20px">
          <el-button type="primary" size="medium" @click="searchPage">查 找</el-button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-button type="primary" size="medium" @click="resetPage">重 置</el-button>
        </div>
      </el-form>
    </el-row>

    <!--内容-->
    <my-table
      :data="page.records"
      :columns="columns"
      @handle-selection-change="selection"
      @handle-sort-change="sortChange"
    >
      <template #url="scope">
          <span>
             <a
               target="_blank"
               :href="urlContent(scope.row.content)"
             >
               <img
                 border="0"
                 align="absmiddle"
                 src="/static/img/link.gif"
               ></a>
          </span>
      </template>

      <template #operating="scope">
          <span>
              <el-button
                size="mini"
                type="primary"
                v-show="scope.row.editable == 1 && scope.row.source == 0"
                @click.stop.prevent="updateInfo(scope.row)"
                v-realm="'system-configuration:sys-black-white-list:edit'"
              >修改</el-button>
          </span>
        <span>
            <el-button
              size="mini"
              type="danger"
              v-show="scope.row.editable == 1 && scope.row.source == 0"
              @click.stop.prevent="del(scope.row)"
              v-realm="'system-configuration:sys-black-white-list:edit'"
            >删除</el-button>
          </span>
      </template>

      <template #source="scope">
          <span>
            <a
              style="color: #1E9FFF"
              target="_blank"
              href=""
              @click.stop.prevent="() => goUrl(scope.row) "
            >{{fieldFormatter.generator(fieldFormatter.sysWhitelist.sourceMap)(scope.row.source)}}</a>
          </span>
      </template>

    </my-table>
    <div class="pagination">
      <el-pagination
        background
        @size-change="changeSize"
        @current-change="goto"
        :current-page="page.current"
        :page-sizes="[10, 20, 30]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
      <div class="pagination-tool">
        <el-button
          type="primary"
          size="mini"
          @click="showFileSelector"
          v-realm="'system-configuration:sys-black-white-list:edit'"
        >导入所有
        </el-button>
        <el-button
          type="primary"
          size="mini"
          @click="exportFile"
          v-realm="'system-configuration:sys-black-white-list'"
        >导出所有
        </el-button>
        <el-button
          type="danger"
          size="mini"
          @click="deleteSelected"
          v-realm="'system-configuration:sys-black-white-list:edit'"
        >删除
        </el-button>
      </div>
    </div>

    <import-excel
      :file-selector-show="fileSelectorShow"
      @import-file="importFile"
      @reset-file="resetFile"
      @download-template="downloadTemplate"
    ></import-excel>
  </div>

  <el-dialog
    :title="dtitle"
    width="30%"
    :visible.sync="dialogShow"
  >
    <el-form>
      <el-form-item
        label="内容"
        :label-width="formLabelWidth"
      >
        <el-input v-model="formData.content" name="content" v-validate="'required|ip|max:255'"
                  v-if="formData.category===1||formData.category===3||formData.category===6"></el-input>
        <el-input v-model="formData.content" name="content" v-validate="'required|domain|max:255'"
                  v-else-if="formData.category===2||formData.category===4||formData.category===7"></el-input>
        <el-input v-model="formData.content" name="content"
                  v-validate="{required:true,url:{require_protocol:true},max:255}"
                  v-else-if="formData.category===8"></el-input>
        <el-input v-model="formData.content" name="content" v-validate="'required|max:255'" v-else></el-input>

        <span
          class="field-error"
          style="float: right;"
          v-show="errors.has('content')"
        >{{ errors.first('content') }}</span>

      </el-form-item>
      <el-form-item
        label="分类"
        :label-width="formLabelWidth"
      >
        <el-select
          v-model="formData.category"
          name="category" v-validate="'required'"
          placeholder="请选择"
        >

          <el-option
            v-for="[k,v] in fieldFormatter.sysWhitelist.categoryMap"
            :key="k"
            :label="v"
            :value="k"
          >
          </el-option>
        </el-select>
        <span
          class="field-error"
          style="float: right;"
          v-show="errors.has('category')"
        >{{ errors.first('category') }}</span>
      </el-form-item>
      <el-form-item
        label="活跃状态"
        :label-width="formLabelWidth"
      >
        <el-select
          v-model="formData.status"
          placeholder="请选择"
          name="status" v-validate="'required'"
        >
          <el-option
            v-for="[k,v] in fieldFormatter.sysWhitelist.statusMap"
            :key="k"
            :label="v"
            :value="k"
          >
          </el-option>
        </el-select>
        <span
          class="field-error"
          style="float: right;"
          v-show="errors.has('status')"
        >{{ errors.first('status') }}</span>
      </el-form-item>
      <el-form-item
        label="备注"
        :label-width="formLabelWidth"
      >
        <el-input v-model="formData.comments" name="comments" v-validate="'max:255'"></el-input>
        <span
          class="field-error"
          style="float: right;"
          v-show="errors.has('comments')"
        >{{ errors.first('comments') }}</span>
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="dialogShow = false">取 消</el-button>
      <el-button
        type="primary"
        @click="updateOrAddData"
        v-realm="'system-configuration:sys-black-white-list:edit'"
      >确 定
      </el-button>
    </div>
  </el-dialog>

</div>
</div>
<div layout:fragment="js">
  <script src="/static/js/module/system-config/model/SysBlackWhiteList.js"></script>
  <script src="/static/js/module/system-config/api/sysBlackWhiteListApi.js"></script>
  <script src="/static/js/module/system-config/admin_whitelist.js"></script>
</div>
</body>
</html>
